<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                        secondary: '#FFC107',
                        neutral: {
                            100: '#f5f5f5',
                            200: '#e5e5e5',
                            700: '#404040',
                            800: '#262626',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-gradient-custom {
                background: linear-gradient(-45deg, #34495e, #7f8c8d, #bdc3c7);
                background-size: 400% 400%;
                animation: gradient 15s ease infinite;
            }
            .input-focus {
                @apply focus:border-primary focus:bg-white focus:ring-2 focus:ring-primary/20 transition-all duration-300;
            }
            .btn-hover {
                @apply hover:shadow-md hover:-translate-y-1 transition-all duration-300;
            }
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body class="bg-gradient-custom min-h-screen flex items-center justify-center p-4">
<div class="container mx-auto max-w-md bg-white rounded-lg shadow-xl overflow-hidden">
    <div class="p-6">
        <h1 class="text-center text-neutral-800 font-medium text-lg border-b border-neutral-200 pb-3 mb-6">员工管理系统</h1>

        <!-- 登录表单 -->
        <div id="login-form">
            <div class="mb-4">
                <label for="username" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                            <i class="fa fa-user"></i>
                        </span>
                    <input type="text" id="username" placeholder="请输入用户名"
                           class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
                </div>
            </div>

            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                            <i class="fa fa-lock"></i>
                        </span>
                    <input type="password" id="password" placeholder="请输入密码"
                           class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
                </div>
                <div class="flex justify-end mt-1">
                    <a href="javascript:void(0)" onclick="openForgotPasswordModal()" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
                </div>
            </div>

<!--            <div class="flex justify-center gap-4 mb-6">-->
<!--                <div class="role-option flex items-center cursor-pointer" onclick="selectRole('admin')">-->
<!--                    <div id="admin-radio" class="w-4 h-4 rounded-full border-2 border-primary mr-2 relative"></div>-->
<!--                    <span>管理员</span>-->
<!--                </div>-->
<!--                <div class="role-option flex items-center cursor-pointer" onclick="selectRole('employee')">-->
<!--                    <div id="employee-radio" class="w-4 h-4 rounded-full border-2 border-neutral-300 mr-2 relative"></div>-->
<!--                    <span>员工</span>-->
<!--                </div>-->
<!--            </div>-->
            <input type="hidden" id="role" value="admin">

            <!-- 按钮组 -->
            <div class="flex justify-between gap-3">
                <button id="login-btn" onclick="login()"
                        class="flex-1 bg-primary text-white py-3 px-4 rounded-full font-medium btn-hover">
                    <i class="fa fa-sign-in mr-2"></i>登录
                </button>
<!--                <button id="register-btn" onclick="switchToRegister()"-->
<!--                        class="flex-1 bg-secondary text-neutral-800 py-3 px-4 rounded-full font-medium btn-hover">-->
<!--                    <i class="fa fa-user-plus mr-2"></i>注册员工-->
<!--                </button>-->
            </div>
        </div>

        <!-- 注册表单 -->
        <div id="register-form" class="hidden">
            <div class="mb-4">
                <label for="reg-username" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
                <input type="text" id="reg-username" placeholder="请输入用户名"
                       class="w-full px-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
            </div>

            <div class="mb-4">
                <label for="reg-password" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
                <input type="password" id="reg-password" placeholder="请输入密码"
                       class="w-full px-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
            </div>

            <div class="mb-4">
                <label for="reg-email" class="block text-sm font-medium text-neutral-700 mb-1">邮箱</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                            <i class="fa fa-envelope"></i>
                        </span>
                    <input type="email" id="reg-email" placeholder="请输入邮箱"
                           class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
                </div>
            </div>

            <div class="mb-6">
                <label for="reg-phone" class="block text-sm font-medium text-neutral-700 mb-1">电话</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                            <i class="fa fa-phone"></i>
                        </span>
                    <input type="tel" id="reg-phone" placeholder="请输入电话"
                           class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
                </div>
            </div>

<!--            <button onclick="register()"-->
<!--                    class="w-full bg-primary text-white py-3 px-4 rounded-full font-medium btn-hover">-->
<!--                <i class="fa fa-check mr-2"></i>注册-->
<!--            </button>-->

            <div class="mt-4 text-center">
                <button onclick="switchToLogin()" class="text-primary hover:text-primary/80 font-medium transition-colors">
                    <i class="fa fa-arrow-left mr-1"></i>返回登录
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 忘记密码模态框 -->
<div id="forgotPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-neutral-800">忘记密码</h3>
            <button onclick="closeForgotPasswordModal()" class="text-neutral-500 hover:text-neutral-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="mb-4">
            <label for="forgot-username" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                    <i class="fa fa-user"></i>
                </span>
                <input type="text" id="forgot-username" placeholder="请输入用户名"
                       class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
            </div>
        </div>
        <div class="mb-4">
            <label for="forgot-email" class="block text-sm font-medium text-neutral-700 mb-1">邮箱</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                    <i class="fa fa-envelope"></i>
                </span>
                <input type="email" id="forgot-email" placeholder="请输入注册时使用的邮箱"
                       class="w-full pl-10 pr-4 py-3 rounded-full border border-neutral-200 bg-neutral-100 input-focus">
            </div>
        </div>
        <button onclick="resetPassword()" class="w-full bg-primary text-white py-3 px-4 rounded-full font-medium btn-hover">
            <i class="fa fa-key mr-2"></i>重置密码
        </button>
    </div>
</div>

<script>
    // 角色选择
    function selectRole(role) {
        document.getElementById('role').value = role;

        // 更新UI
        const adminRadio = document.getElementById('admin-radio');
        const employeeRadio = document.getElementById('employee-radio');

        if (role === 'admin') {
            adminRadio.classList.remove('border-neutral-300');
            adminRadio.classList.add('border-primary', 'bg-primary');
            adminRadio.innerHTML = '<div class="absolute inset-0 m-auto w-2 h-2 bg-white rounded-full"></div>';

            employeeRadio.classList.remove('border-primary', 'bg-primary');
            employeeRadio.classList.add('border-neutral-300');
            employeeRadio.innerHTML = '';
        } else {
            employeeRadio.classList.remove('border-neutral-300');
            employeeRadio.classList.add('border-primary', 'bg-primary');
            employeeRadio.innerHTML = '<div class="absolute inset-0 m-auto w-2 h-2 bg-white rounded-full"></div>';

            adminRadio.classList.remove('border-primary', 'bg-primary');
            adminRadio.classList.add('border-neutral-300');
            adminRadio.innerHTML = '';
        }
    }

    // 切换表单
    function switchToRegister() {
        document.getElementById('login-form').classList.add('hidden');
        document.getElementById('register-form').classList.remove('hidden');
    }

    function switchToLogin() {
        document.getElementById('login-form').classList.remove('hidden');
        document.getElementById('register-form').classList.add('hidden');
    }

    // 登录功能
    function login() {
        const role = 'admin';
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (!username || !password) {
            alert('请输入用户名和密码');
            return;
        }

        // 发送 AJAX 请求
        fetch('http://localhost:8080/auth/login', { 
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password, role })
        })
        .then(response => { 
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            console.log('登录响应数据:', data);
            if (typeof data === 'string') {
                if (data === '登录成功') {
                    alert(`${role === 'admin' ? '管理员' : '员工'} ${username} 登录成功`);
                    window.location.href = '/employee.html';
                } else {
                    alert('登录失败: ' + data);
                }
            } else if (data.result === 'SUCCESS') {
                alert(`${role === 'admin' ? '管理员' : '员工'} ${username} 登录成功`);
                // 存储token到localStorage
                if (data.data && data.data.token) {
                    localStorage.setItem('token', "Bearer " + data.data.token);
                }
                window.location.href = '/employee.html';
            } else { 
                alert('登录失败: ' + data.message);
            }
        })
        .catch(error => { 
            console.error('登录请求失败:', error);
            alert('登录请求失败，请重试');
        });
    }

    // 注册功能
    function register() {
        const username = document.getElementById('reg-username').value;
        const password = document.getElementById('reg-password').value;
        const email = document.getElementById('reg-email').value;
        const phone = document.getElementById('reg-phone').value;

        // 简单验证
        if (!username || !password || !email || !phone) {
            alert('请填写所有必填字段');
            return;
        }

        // 创建符合后端Employee实体类的数据结构
        const employeeData = {
            username: username,
            password: password,
            email: email,
            phoneNumber: phone,
            firstName: username, // 简单起见，使用用户名作为名字
            lastName: '',
            hireDate: new Date().toISOString().split('T')[0], // 当前日期
            positionId: 1, // 默认职位ID
            salary: 0.0 // 默认薪资
        };

        console.log('注册数据:', employeeData);

        // 发送 AJAX 请求
        fetch('http://localhost:8080/auth/register', { // 修正接口地址
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(employeeData)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            if (typeof data === 'string') {
                // 处理服务端返回的字符串响应
                if (data === '注册成功') {
                    alert('注册成功，请使用新账号登录');
                    switchToLogin();
                } else {
                    alert('注册失败: ' + data);
                }
            } else if (data.success) {
                // 兼容原有的对象响应格式
                alert('注册成功，请使用新账号登录');
                switchToLogin();
            } else {
                alert('注册失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('注册请求失败:', error);
            alert('注册请求失败，请重试');
        });
    }

    // 忘记密码功能
    function openForgotPasswordModal() {
        document.getElementById('forgotPasswordModal').classList.remove('hidden');
    }

    function closeForgotPasswordModal() {
        document.getElementById('forgotPasswordModal').classList.add('hidden');
    }

    function resetPassword() {
        const username = document.getElementById('forgot-username').value;
        const email = document.getElementById('forgot-email').value;

        if (!username || !email) {
            alert('请输入用户名和邮箱');
            return;
        }

        // 发送重置密码请求
        fetch('http://localhost:8080/auth/forgot-password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, email })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            if (data.result === 'SUCCESS') {
                alert('密码重置邮件已发送，请查收邮箱');
                closeForgotPasswordModal();
            } else {
                alert('密码重置失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('密码重置请求失败:', error);
            alert('密码重置请求失败，请重试');
        });
    }
</script>
</body>
</html>